<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-18 10:03:37
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-08-18 10:13:06
 * @Description: 头像组件
 *
 * 属性
 * src          头像地址(默认)         String
 * size         组件尺寸(默认 40)      Number
 * marginRight  右外边距(默认 10)      Number
 * marginBottom 底部边距(默认 0)       Number
 * border       有无边框(默认 false)   Boolean
 *
 * 事件
 * @click       click切换事件
 * @FilePath: \tuanfeng-mini\src\components\Avatar.vue
-->
<template>
    <div class="avatar" :class="{ border }" :style="{
      width: size + 'px',
      height: size + 'px',
      marginRight: marginRight + 'px',
      marginBottom: marginBottom + 'px',
      backgroundImage: `url(${src || avatar_default_img})`,
    }" @click="click"></div>
</template>

<script>
import Vue from "vue";
import { avatar_default_img } from "../utils/imgUrl";
const app = getApp();

export default Vue.extend({
    props: {
        src: {
            type: String,
            default: avatar_default_img,
        },
        size: {
            type: Number,
            default: 40,
        },
        marginRight: {
            type: Number,
            default: 10,
        },
        marginBottom: {
            type: Number,
            default: 0,
        },
        border: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            avatar_default_img,
        };
    },
    methods: {
        click() {
            this.$emit("click");
        },
    },
});
</script>

<style lang="scss" scoped>
@import "../assets/scss/common.scss";

.avatar {
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url($avatar_default_img);
    flex: none;
    &.border {
        border: 4rpx solid #fff;
    }
}
</style>